<template>
  <div class="white-box"  v-loading.fullscreen="loading">
    <el-form ref="formRef" :model="formData" :rules="formRule" label-width="120px">

      <el-form-item label="文章分类" prop="article_category_id"  v-if="formData.article_category_id != 1 && formData.article_category_id != 2">
        <el-select v-model="formData.article_category_id" placeholder="请选择文章分类">
          <el-option :label="item.title" :value="item.id" v-for="(item, index) in article_category_id_list" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="文章分类" prop="article_category_id"  v-if="formData.article_category_id == 1 || formData.article_category_id == 2">
          {{detail.article_category_id_label}}
      </el-form-item>
      <el-form-item label="文章标题" prop="article_title">
        <el-input v-model.trim="formData.article_title" clearable placeholder="请输入文章标题"/>
      </el-form-item>
      <el-form-item label="文章内容" prop="article_content">
        <div class="editor-box">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="editorToolbarConfig"
                   mode="default"/>
          <Editor
              style="height: 440px; overflow-y: hidden"
              v-model="formData.article_content"
              :defaultConfig="editorConfig"
              mode="default"
              @onCreated="handleEditorCreated"
          />
        </div>
      </el-form-item>
      <el-form-item label="排序" prop="sort" required>
        <el-input v-model.trim="formData.sort" clearable placeholder="请输入站点序号" oninput="value=value.replace(/[^\d.]/g,'')" style="width: 30%"/>
        <el-text type="danger" style="margin-left: 5px">格式：数字，小的在前显示</el-text>
      </el-form-item>
      <el-form-item label="是否显示" prop="is_show" required>
        <el-radio-group v-model="formData.is_show">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <div class="foot-btn flexs-center" style="margin-top: 30px">
          <el-button type="primary" size="large" :loading="btnLoading" @click="submitForm(formRef)">{{article_id?'确认修改':'确认添加'}}</el-button>
        </div>
      </el-form-item>
    </el-form>

    <go-back/>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount} from "vue"
import editorMixins from "@mixins/editor"
import {useRouter, useRoute} from "vue-router"
import {UploadFilled, CloseBold} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import "@wangeditor/editor/dist/css/style.css"
import {Editor, Toolbar} from "@wangeditor/editor-for-vue"

/**
 * minxin编辑器
 */
const {
  editorRef, editorHtml, editorConfig, editorToolbarConfig, handleEditorCreated
} = editorMixins()

const router = useRouter()
const route = useRoute()
const {proxy} = getCurrentInstance()

const article_id = route.query.id || ""

const article_category_id_list = [
  {
    id:3,
    title:'平台服务'
  },
  {
    id:4,
    title:'咨询/问答'
  }
];

onMounted(() => {
  if (article_id) {
    getDetail()
  }
})
/**
 * 添加
 * @param {Boolean} btnLoading 提交按钮状态
 * @param {Array} formRef 表单规则
 * @param {Object} formData  表单字段
 * @param {Object} formRule  表单提示
 * @param {Function} submitForm 提交表单
 */
const btnLoading = ref(false)
const loading = ref(false)
const formRef = ref(null)
const formData = reactive({
  article_title: '',
  article_content: '',
  sort: 0,
  is_show: 1,
  article_category_id:''
})
const detail = reactive({
  article_category_id_label:''
})
if(article_id){
  formData.article_id = article_id
}
const formRule = reactive({
  article_title: [{required: true, message: "请输入文章名称", trigger: "blur"}],
  sort: [{required: true, message: "请输入排序", trigger: "blur"}],
})
const getDetail = () => {
  loading.value = true
  proxy.$axios
      .get("admin/article/detail", {
        params: {
          article_id: article_id,
        },
      })
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          for (let key in formData) {
            formData[key] = result[key]
          }
          detail.article_category_id_label = result.article_category_id_label
          // formData.article_title = result.article_title
          // formData.article_content = result.article_content
          // editorHtml.value = result.content
          // editorHtml.value = result.content.replace(/<img [^>]*src=['"]/g, `<img src="${proxy.imgUrl}`) // 往图片追加根域名和'/'
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      })
      .catch((err) => {
      }).finally(()=>{
        loading.value = false
      })
}
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      let htmls = editorHtml.value
      // if (editorHtml.value) {
      //     htmls = editorHtml.value.replace(/\bhttps?:\/\/(.*?)\/+/gi, "") // 去除图片根域名以及根域名后面的'/'
      // }
      let data = {
        ...formData
      };
      let url = article_id ?"admin/article/update":"admin/article/create"
      btnLoading.value = true
      proxy.$axios
          .post(url,data)
          .then((res) => {
            btnLoading.value = false
            if (res.data.code == 200) {
              proxy.$message({message: "保存成功！", type: "success"})
              // router.push("/help")
            } else {
              proxy.$message({message: res.data.msg, type: "error"})
            }
          })
          .catch((err) => {
            btnLoading.value = false
          })
    }
  })
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>

<style lang="less" scoped>

//
//:deep(.el-date-editor) {
//  width: 320px !important;
//
//  .el-input__wrapper {
//    width: 320px;
//  }
//}
</style>
